<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

    <!--    引入vue-->
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--    引入axios-->
    <script src="js/axios.min.js"></script>
    <!--    表格颜色颜色样式-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <title>form</title>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="课程管理系统后台">
    </el-page-header>
    <el-divider content-position="right">管理员你好</el-divider>

    <!--卡片布局-->
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card class="box-card" style="height: 800px">
                <div slot="header" class="clearfix">
                    <span>老师信息</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="allowTeachers">通过校验</el-button>
                </div>
                <el-table
                        :data="teacherData"
                        style="width: 100%"
                        :row-class-name="teacherRow"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="200">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card" style="height: 800px">
                <div slot="header" class="clearfix">
                    <span>学生信息</span>
                </div>
                <el-table
                        :data="studentData"
                        style="width: 100%"
                        stripe=true
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="200">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>


</div>

<script>
    new Vue({
        el: "#app",
        created() {
            // window.location.href 属性返回当前页面的 URL。
            let url = decodeURI(window.location.href); // 对获取url的url进行解码   decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码。
            let urlParsm = url.split("?obj=");  // 获取url携带的参数
            this.adminInfo = urlParsm ? JSON.parse(urlParsm[1]) : ''; //判断参数是否存在 存在的话对对参数进行转换
            this.getStudents();
            this.getTeachers();
        },
        data() {
            return {
                //老师列表
                teacherData: [],
                //学生列表
                studentData: [],

                //复选框选中数据集合
                multipleSelection: [],
                //条件搜索表单
                team: {
                    teamArea: "",
                    stu1Name: "",
                    teamName: "",
                    stu1Phone: "",
                },
                //数据框表单隐藏选项
                dialogVisible: false,
                //分页
                currentPage: 1,
            };
        },
        methods: {
            //列表颜色
            teacherRow({row, rowIndex}) {
                if (row.status === 0) {
                    return 'warning-row';
                }
                return '';
            },


            //页头返回
            goBack() {
                window.location.replace(document.referrer);
            },
            //获取老师的所有课程
            getTeachers() {
                _this = this
                //发送请求数据
                axios({
                    method: "get",
                    url: "/getTeacher",
                }).then(function (resp) {
                    _this.teacherData = resp.data
                });
            },
            //获取学生的所有课程
            getStudents() {
                _this = this
                //发送请求数据
                axios({
                    method: "get",
                    url: "/getStudent",
                }).then(function (resp) {
                    _this.studentData = resp.data
                });
            },

            //通过老师
            allowTeachers() {
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/allowTeacher",
                    data: this.multipleSelection
                }).then(function (resp) {
                    if(resp.data.status===200){
                        _this.$message({
                            message: "校验通过",
                            type: "success",
                        });
                        window.location.reload();
                    }
                    else{
                        _this.$message({
                            message: "校验失败",
                            type: "error",
                        });
                    }
                });
            },
            //实现多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //搜索条件表单,调用查询方法
            onSubmit() {
                console.log(this.team);
            },
            //测试

            test() {

            }
        },
    });
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }


    :last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>


</body>
</html>
